 <template>
  <div class="bg_page" v-if="goodsData">
    <!-- <header-bar title="商品详情"></header-bar> -->
    <div class="top_fix_bar_wrapper">
      <div class="top_fix_bar px1bb">
        <img class="app_logo" src="~@/assets/imgs/common/app_logo.png">
        <span class="down_app" @click="upDownApp">下载app</span>
      </div> 
    </div> 
    <div class="goods_msg">
      <div class="user_msg">
        <div class="left">
          <img class="user_avatar" :src="goodsData.userIcon">
        </div>
        <div class="right">
          <div class="user_name">
            <span>{{goodsData.nickName || goodsData.userName}}</span>
            <img v-if="goodsData.authStatus == 'Y'" src="~@/assets/imgs/common/icon_auth.png">
          </div>
          <div class="push_time">
            <span v-if="pushTime">发布于{{pushTime}}前</span>
            <span>&nbsp;{{goodsData.city}}&nbsp;{{goodsData.region}}</span> 
          </div>
        </div>
      </div>
      <div class="goods_price">
        <span class="present_price pf_m"><i>￥</i>{{goodsData.price}}</span>
        <span class="original_price" v-show="goodsData.originalPrice">￥{{goodsData.originalPrice}}</span>
        <span class="postage" v-if="goodsData.postage*1 > 0">运费:￥{{goodsData.postage}}</span>
      </div>
      <div class="goods_name">{{goodsData.title}}</div>
      <div class="goods_descripe">{{goodsData.description}}</div>
      <div class="goods_tags">
        <button class="tag_item" v-if="goodsData.postage*1 === 0">#包邮</button>
        <button class="tag_item" v-for="(item,i) in tagsList" :key="i">#{{item}}</button>
      </div>
      <div class="goods_imgs">
        <div class="img_item" v-for="(item,i) in imgList" :key="i">
            <img v-lazy="item">
        </div>
      </div>
      
      <!-- <div class="goods_origin">
        <div class="origin_text">商品原购买信息</div>
        <div class="origin_goods">
          <div class="left">
            <img class="origin_img" src="http://xianchaosectrade.oss-cn-hangzhou.aliyuncs.com/test/0a377982e1fb3a19.png">
            <div class="origin_msg">
              <div class="origin_goods_title">Apple Beats Solo3 头戴式Apple Beats Solo3 头戴式Apple Beats Solo3 头戴式</div>
              <div class="origin_goods_type">内存128g、金色</div>
              <div class="origin_price"><i>￥</i>1500</div>
            </div>
          </div>
          <img class="right_icon" src="~@/assets/imgs/common/right_arrow_icon.png">
        </div>
      </div> -->
    </div>

    <!-- <div class="user_detail_msg" @click="upDownApp">
      <div class="left">
        <div class="user_name">{{goodsData.nickName || goodsData.userName}}</div>
        <div class="user_intro" v-if="userInfo">
          <span v-if="userInfo.yearDivisor">{{yearDivisor}}后，</span> 
          <span v-if="userInfo.constellation">{{userInfo.constellation}}，</span> 
          <span v-if="userInfo.totalDays">加入闲巢{{userInfo.totalDays}}天，</span> 
          <span v-if="userInfo.location">常居住{{userInfo.location}}</span> 
        </div>
        <button class="auth_icon" v-if="goodsData.authStatus == 'Y'">
          <img src="~@/assets/imgs/common/icon_auth.png">
          <span>已实名认证</span>
        </button>
      </div>
      <img class="user_avatar" :src="goodsData.userIcon">
    </div> -->

    <div class="message_panel">
       <div class="panel_title">全部留言<span v-if="totalMsg*1 >0">({{totalMsg}})</span></div>
       <div class="no_message" v-if="msgList.length == 0">
         <div class="no_message_tips">想知道更多宝贝细节</div>
         <div class="action_msg">
           <span @click="upDownApp">下载app去留言</span>
         </div>
       </div>

       <div class="message_list" v-else>
         <div v-for="item in msgList" :key="item.messageId">
          <div class="message_item" v-for="(msg,i) in item.goodsMessageDetailsVoList" :key="msg.messageInfoId">
            <div v-if="i == 0"> 
              <div class="user_msg">
                <!-- <img class="user_avatar" :src="msg.userIcon"> -->
                <div class="user_avatar bic" v-lazy:background-image="msg.userIcon"></div>
                <span class="user_name">{{msg.nickName}}</span>
                <button class="main_user_icon" v-if="msg.asPublisher == 'Y'">发布者</button>
              </div>
              <div class="content">{{msg.message}}</div>
              <div class="message_time">{{msg.timeInterval | timeIntervalFilter}}</div>
            </div>

            <div v-else class="message_item inner">
              <div class="user_msg">
                <img class="user_avatar" :src="msg.userIcon">
                <span class="user_name">{{msg.nickName}}</span>
                <button class="main_user_icon" v-if="msg.asPublisher == 'Y'">发布者</button>
              </div>
              <div class="content"><span>回复{{msg.replyMessageNickName}}:</span>{{msg.message}}</div>
              <div class="message_time">{{msg.timeInterval | timeIntervalFilter}}</div>
            </div> 
         </div>
        </div>
       </div>
    </div>

    <recommend-goods-list :list="goodsListData" title="相似推荐" :style="{paddingTop:'0.3rem'}" :clickTo="toH5GoodsDetail"></recommend-goods-list>

    <div class="no_data_block" v-if="goodsListData.length == 0 && !isLoading">
      <no-data-panel></no-data-panel>
    </div>
    <div>
      <infinite-load v-if="goodsListData.length > 0" :scroll-target="scrollTarget" :is-loading="isLoading" :tipsShow="tipsShow" :is-nomore="isNomre" @load="getNextData"></infinite-load>
    </div>

    <div class="bottom_fix_bar">
      <!-- <div class="left">
        <div class="icon_btn mr" @click="upDownApp">
          <img src="~@/assets/imgs/common/message_icon.png">
          <span>留言</span>
        </div>
         <div class="icon_btn" @click="upDownApp">
          <img src="~@/assets/imgs/common/collect_icon.png">
          <span>收藏</span>
        </div>
      </div>
      <div class="right">
        <span class="text_btn1" @click="upDownApp">先聊聊</span>
        <span class="text_btn2" @click="upDownApp">立即购买</span>
      </div> -->
      <div class="big_down_btn" @click="upDownApp">下载闲巢二手APP</div>
    </div>

    <div class="open_android_tips bounceIn" v-if="needOpenSafariTipsShow && openSafariTipsShow">
       点击右上角，选择“{{blantType == 2 ? '在Safari中':'浏览器'}}”打开
    </div>
    <div class="android_modal" v-if="needOpenSafariTipsShow && openSafariTipsShow" @click="openSafariTipsShow = false;"></div>
  </div>
</template>

<script>
import HeaderBar from "@/components/header.vue"
import infiniteLoad from '@/components/infiniteLoad.vue';
import RecommendGoodsList from '@/views/common/goodsList/recommendGoodsList.vue';
import {mapState,mapActions} from 'vuex';
import native from '@/libs/native/index';
import utils from '@/libs/utils'
export default {
  props: {
   
  },
  components:{
    HeaderBar,
    infiniteLoad,
    RecommendGoodsList
  },

  data() {
    return {
      scrollTarget: '#scrollPanel',
      isLoading: false,
      isNomre: false,
      tipsShow: true,
      currentPage:1,
      goodsListData:[],
      goodsId:'',
      goodsData:null,
      imgList:[],
      tagsList:[],
      msgList:[],
      totalMsg:'',
      userInfo:null,
      blantType:0,
      openSafariTipsShow:false,
      needOpenSafariTipsShow:false,
      downObj:null
    }
  },
  computed: {
    ...mapState({
     
    }),
    pushTime(){
      if(this.goodsData.putTime){
        let l = this.goodsData.putTime.length;
        let type = this.goodsData.putTime.charAt(l-1).toLowerCase();
        let num = this.goodsData.putTime.slice(0,-1);
        if(type == 'm'){
          return num + '分钟';
        }else if(type == 'h'){
          return num + '小时';
        }else{
          return num + '天';
        }
      }else{
        return '';
      }
    }
  },
  created() {
    // this.goodsId = this.$route.query.goodsId || '';
    // this.getGoodsInfo();
    // this.getRecommendAppGoodsList();
    // this.getMessageInfo();
    if(utils.checkIfInQQ()){
      this.needOpenSafariTipsShow = true;
    }else{
      this.needOpenSafariTipsShow = false;
      this.getDownloadUrl();
    };
    this.blantType = utils.getBlatFromSimple();
    this.getInitData();
  },
  filters:{
     timeIntervalFilter(val){
       val = val.toLowerCase();
       let result = '';
       let reg = /[a-z]+/g;
       let type = val.match(reg)[0];
       let pre = val.slice(0,-type.length);
       if(type == 'gby'){
         result =  pre;
       }else if(type == 'by'){
         result =  '前天' + pre;
       }else if(type == 'y'){
         result =  '昨天' + pre;
       }else if(type == 'h'){
         result =  pre + '小时前';
       }else if(type == 'm'){
         result =  pre + '分钟前';
       };
       return result;
     }
  },
  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),
    getInitData(){
      this.goodsId = this.$route.query.goodsId || '';
      this.getGoodsInfo();
      this.getRecommendAppGoodsList();
      this.getMessageInfo();
    },
    getDownloadUrl(){
      this.$ajax.getDownloadUrl({}).then((res)=>{
        if(res.code == '0000'){
          this.downObj = res.data;
        }
      });
    },
    getGoodsInfo(){
      this.toggleLoading({flag:true});
      this.$ajax.getGoodsInfo2({
        id:this.goodsId
      }).then((res)=>{
        this.toggleLoading({flag:false});
        if(res.code=='0000'){
          let data = res.data;
          if(data.imgUrls){
            this.imgList = data.imgUrls.split(',');
          }else{
            this.imgList = [];
          };
          if(data.tagLabs){
            this.tagsList = data.tagLabs.split(',');
          }else{
            this.tagsList = [];
          };
          this.goodsData = data;
          // this.getUserIndex(data.userId);
        }
      });
    },
     getUserIndex(userId){
        this.$ajax.userIndex({userId:userId}).then(res=>{
            if(res.code=='0000'){
                this.userInfo = res.data;
            }
        })
      },
    getMessageInfo(){
      this.$ajax.getMessageInfo({
        queryBody:{
          goodsId:this.goodsId
        },
        page:{
          size:999,
          current:1
        }
      }).then((res)=>{
        if(res.code == '0000'){
          this.totalMsg = res.data.totalElements;
          this.msgList = res.data.content || [];
        }
      });
    },
    
    getRecommendAppGoodsList(){
      if(this.currentPage == 1){
        this.toggleLoading({flag:true});
      };
      this.isLoading = true;

      this.$ajax.getRecommendAppGoodsList2({
        queryBody:{
      
        },
        page:{
          size:10,
          current:this.currentPage
        }
      }).then((res)=>{
        this.toggleLoading({flag:false});
        if(this.isLoading){
          this.isLoading = false;
        };
        if(res.code == '0000'){
          if(!this.tipsShow){
            this.tipsShow = true;
          };
         
          if(res.data.records.length < 10){
            this.isNomre = true;
          };
          if(this.currentPage == 1){
            this.goodsListData = res.data.records;
          }else{
            this.goodsListData = [...this.goodsListData,...res.data.records];
          }
        }
      });
    },

    getNextData(){
      this.isLoading = true;
      this.currentPage++;
      this.getRecommendAppGoodsList()
    },
    returnToIndex(){
      native.goHome();
    },
    toH5GoodsDetail(id){
      let url = location.href;
      let newUrl =  url.replace(/(goodsId=)(\d*)/,(...match)=>{
        return match[1]+id;
      });
      location.replace(newUrl);
      // this.getInitData();
      location.reload(); 
    },
    upDownApp(){
      if(this.needOpenSafariTipsShow){
        this.openSafariTipsShow = true;
      }else{
        this.openSafariTipsShow = false;
        this.loadApp();
      };
    },

    loadApp(){
      let flag = this.blantType;
      if(flag == 1){
        if(this.downObj && this.downObj.android){
          window.location.href = this.downObj.android;
        }else{
          this.showMsg({content:'暂无下载地址'});
        }
      }else if(flag == 2){
        if(this.downObj && this.downObj.ios){
          window.location.href = this.downObj.ios;
        }else{
          this.showMsg({content:'暂无下载地址'});
        }
      }else{
        console.log(flag);
      };
    }

  }
}
</script>

<style lang="less" scoped>
.bg_page{
  min-height: 100%;
  background-color:#F6F6F6;
  padding-bottom: 1.2rem;
}
.inner_panel{
  background-color: #F6F6F6;
}
.goods_msg{
  background-color: #fff;
  padding:0.4rem 0.3rem 0.2rem 0.3rem;
  .user_msg{
    display: flex;
    align-items: center;
    .left{
      .user_avatar{
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
      }
    }
    .right{
        margin-left: 0.16rem;
        .user_name{
          display: flex;
          align-items: center;
          span{
            font-size: 0.28rem;
            color: #333;
            line-height: 0.36rem;
          }
          img{
            width: 0.22rem;
            height: 0.24rem;
            margin-left: 0.1rem;
          }
        }
        .push_time{
          width: 6rem;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          margin-top: 0.08rem;
          font-size: 0.22rem;
          color: #999;
          line-height: 0.28rem;
        }
    }
  }
  .goods_price{
    margin-top: 0.4rem;
    display: flex;
    align-items: flex-end;
    .present_price{
        font-size: 0.48rem;
        color: #FF4238;
        line-height: 0.6rem;
        margin-right: 0.1rem;
        display: flex;
        align-items: flex-end;
        i{
          font-style: normal;
          font-size: 0.28rem;
          line-height: 1.7;
        }
    }
    .original_price{
      font-size: 0.24rem;
      color: #ccc;
      line-height: 0.42rem;
      position: relative;
      margin-right: 0.1rem;
      &::after{
          content: '';
          position: absolute;
          top:0.18rem;
          width: 100%;
          height: 0.02rem;
          background-color: #ccc;
          left: 0;
      }
    }
    .postage{
       font-size: 0.22rem;
       color: #999;
       line-height: 0.44rem;
    }
  }
  .goods_tags{
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    .tag_item{
      font-size: 0.22rem;
      color: #999;
      line-height: 0.28rem;
      height: 0.36rem;
      padding:0 0.12rem;
      border-radius: 0.18rem;
      background-color: #f6f6f6;
      margin-right: 0.1rem;
    }
  }
  .goods_name{
    margin-top: 0.32rem;
    font-size: 0.36rem;
    color: #333;
    line-height: 0.48rem;
    font-weight: bold;
  }
  .goods_descripe{
    margin-top: 0.2rem;
    font-size: 0.28rem;
    color: #333;
    line-height: 0.36rem;
  }
  .goods_imgs{
    margin-top: 0.32rem;
    .img_item{
      margin-bottom: 0.1rem;
      img{
        width: 100%;
        height: auto;
      }
    }
  }
  .goods_origin{
    margin-top: 0.4rem;
    .origin_text{
      font-size: 0.28rem;
      color: #333;
      line-height: 0.36rem
    }
    .origin_goods{
      margin-top: 0.2rem;
      background-color: #fafafa;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:0.2rem;
      .left{
        display: flex;
        align-items: center;
        .origin_img{
          width: 1.2rem;
          height: 1.2rem;
        }
        .origin_msg{
          margin-left: 0.2rem;
          .origin_goods_title{
             font-size: 0.26rem;
             color: #333;
             line-height: 0.36rem;
             width: 3.4rem;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis; 
          }
          .origin_goods_type{
             font-size: 0.22rem;
             color: #999;
             line-height: 0.3rem;
             width: 3.4rem;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis; 
             margin-top: 0.04rem;
          }
          .origin_price{
            font-size: 0.36rem;
            color: #FF4238;
            line-height: 0.44rem;
            margin-top: 0.06rem;
            display: flex;
            align-items: flex-end;
            i{
              font-style: normal;
              font-size: 0.24rem;
              line-height: 1.7;
            }
          }
        }
      }
      .right_icon{
        width: 0.16rem;
        height: 0.28rem;
      }
    }
  }
}

.user_detail_msg{
  margin-top: 0.2rem;
  background-color: #fff;
  padding:0.3rem;
  display: flex;
  justify-content: space-between;
  .left{
    .user_name{
      font-size: 0.32rem;
      line-height: 0.4rem;
      color: #333;
    }
    .user_intro{
      margin-top: 0.08rem;
      font-size: 0.24rem;
      line-height: 0.32rem;
      color: #666;
    }
    .auth_icon{
       margin-top: 0.12rem;
       display: flex;
       align-items: center;
       padding:0.06rem 0.1rem;
       border-radius: 0.04rem;
       border:0.02rem solid #51B2F9;
   
       img{
          width: 0.22rem;
          height: 0.24rem;
          margin-right: 0.04rem;
       }
       span{
          font-size: 0.22rem;
          color: #51B2F9;
          line-height: 0.28rem;
       }
    }

  }
  .user_avatar{
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
  }
}
.message_panel{
  margin-top: 0.2rem;
  background-color: #fff;
  padding:0.2rem 0.3rem;
  .panel_title{
    font-size: 0.32rem;
    color: #333;
    line-height: 0.44rem;
  }
  .no_message{
    height: 2.76rem;
    .no_message_tips{
      margin-top: 0.6rem;
      font-size: 0.28rem;
      color: #999;
      line-height: 0.4rem;
      text-align: center;
    }
    .action_msg{
      display: flex;
      justify-content: center;
      margin-top: 0.4rem;
      span{
        padding: 0.16rem 0.4rem;
        background-color: #14C877;
        font-size: 0.28rem;
        color: #fff;
        line-height: 0.36rem;
        border-radius: 0.34rem;
      }
    }

  }
}
.no_data_block{
  padding-top: 1.6rem;
}

.message_list{
  margin-top: 0.2rem;
  .message_item{
    margin-bottom: 0.4rem;
    // padding:0 0.3rem;
    // padding-left: 0.3rem;
    .user_msg{
      display: flex;
      align-items: center;
      .user_avatar{
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 0.2rem;
        overflow: hidden;
      }
      .user_name{
        margin-left: 0.1rem;
        font-size: 0.28rem;
        color: #666;
      }
      .main_user_icon{
        margin-left: 0.04rem;
        height: 0.3rem;
        padding:0 0.1rem;
        border:0.02rem solid #14C877;
        border-radius: 0.04rem;
        font-size: 0.2rem;
        // line-height: 0.3rem;
        line-height: 1.2;
        color: #14C877;
      }

    }
    .content{
      margin-top: 0.1rem;
      font-size: 0.28rem;
      color: #333;
      line-height: 0.36rem;
      padding-left: 0.5rem;
      span{
        color: #666;
      }
    }
    .message_time{
      margin-top: 0.1rem;
      font-size: 0.22rem;
      line-height: 0.28rem;
      color: #999;
      padding-left: 0.5rem;
    }
    &.inner{
      margin-top: 0.3rem;
      margin-bottom: 0rem;
      padding-left: 0.5rem;
    }
  }
}
.bottom_fix_bar{
  position: fixed;
  bottom: 0.3rem;
  left: 0;
  width: 100%;
  // background-color: #fff;
  // padding:0.16rem 0rem;
  display: flex;
  // justify-content: space-between;
  align-items: center;

  justify-content: center;
  .big_down_btn{
    width: 4.9rem;
    height: 0.84rem;
    border-radius: 0.42rem;
    background-color: #14C877;
    font-size: 0.32rem;
    line-height: 0.44rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  // .left{
  //   flex: 1;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   .icon_btn{
  //     display: flex;
  //     flex-direction: column;
  //     justify-content: center;
  //     align-items: center;
  //     &.mr{
  //       margin-right: 0.72rem;
  //     }
  //     img{
  //       width: 0.4rem;
  //       height: 0.4rem;
  //     }
  //     span{
  //       font-size: 0.24rem;
  //       color: #999;
  //       line-height: 0.32rem;
  //       margin-top: 0.02rem;
  //     }
  //   }
  // }
  // .right{
  //   display: flex;
  //   justify-content: space-between;
  //   padding-right: 0.3rem;
  //   .text_btn1{
  //     padding: 0.16rem 0;
  //     width: 1.92rem;
  //     text-align: center;
  //     border:0.02rem solid #14C877;
  //     font-size: 0.28rem;
  //     color: #14C877;
  //     line-height: 0.36rem;
  //     border-radius: 0.34rem;
  //     margin-right: 0.2rem;
  //   }
  //   .text_btn2{
  //     padding: 0.16rem 0;
  //     width: 1.92rem;
  //     text-align: center;
  //     background-color: #14C877;
  //     font-size: 0.28rem;
  //     color: #fff;
  //     line-height: 0.36rem;
  //     border-radius: 0.34rem;
  //   }
  // }
}
.top_fix_bar_wrapper{
  height: 1.08rem;
  background-color: #ededed;
  .top_fix_bar{
      height: 1.08rem;
      background-color: #fff;
      position: fixed;
      top:0;
      left: 0;
      right: 0;
      padding: 0 0.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 6;
    .app_logo{
      width: 2rem;
      height: auto;
    }
    .down_app{
      padding: 0.1rem 0.32rem;
      background-color: #14C877;
      font-size: 0.26rem;
      color: #fff;
      line-height: 0.36rem;
      border-radius: 0.28rem;
    }

  }

}
.open_android_tips {
  position: fixed;
  width: 3.26rem;
  padding: 0.2rem 0.3rem;
  top: 16px;
  right: 0.2rem;
  border-radius: 0.08rem;
  background-color: #fff;
  font-size: 0.28rem;
  color: #000;
  line-height: 0.4rem;
  z-index: 9999999;
}
.open_android_tips::after {
  content: "";
  position: absolute;
  top: -12px;
  right: 0.2rem;
  border: 6px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  z-index: 9999999;
}
.android_modal{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: fade(rgba(#333),80);
  z-index: 9999998;
}

.bounceIn {
  animation-fill-mode: both;
  animation-duration: 0.75s;
  animation-name: bounceIn;
}
 @keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
      transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
      transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
      transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

</style>
